<template>
	<view class="pb-safe-area">
		<view class="p-4 flex flex-column grid-gap-4">
			<view class="flex flex-column">
				<text class="font-weight-600">当前推荐位</text>
				<view class="grid-columns-4 pt-4 grid-gap-2">
					<view class="grid-column-1 flex flex-column flex-center grid-gap-1 bg-primary-light-9 rounded-4" style="height:120px"
						v-for="(item, index) in RecommendTechnician" :key="index"
						@tap="$page.open('/pages/technician/details?id=' + item.technician_id)">
						<image :src="item.headimg" mode="scaleToFill"
							style="width: 100rpx;height: 100rpx;border-radius: 50%;" />
						<text class="font-weight-500 h9">{{ item.nickname }}</text>
						<text class="h10 text-placeholder">总接单{{ item.order_num }}</text>
					</view>
					<view class="grid-column-1 flex flex-column flex-center grid-gap-1 bg-success-light-9 rounded-4" style="height:120px"
						v-for="(item, index) in 8-RecommendTechnician.length" :key="index">
						<text class="font-weight-600 h8 text-success">空位</text>
					</view>
				</view>
			</view>
			<view class="flex flex-column grid-gap-4">
				<text class="font-weight-600">当前推荐位人数</text>
				<view class="flex flex-center h1 font-weight-600 text-primary py-10">
					<text>{{ info.recommendNum }}</text>
					<text>/</text>
					<text>8</text>
				</view>
			</view>
			<view class="bg-white rounded-4 flex flex-column grid-gap-4 p-4">
				<view class="flex flex-y-center grid-gap-2">
					<text class="bg-primary-light-3 rounded-4" style="height: 8px;width: 8px;"></text>
					<text class="h8 font-weight-600">兑换天数</text>
				</view>
				<view class="flex flex-center">
					<x-input-number v-model="form.num" :max="maxDay" unit="天" size="h1" show gap="6"></x-input-number>
				</view>
				<view class="flex">
					<button class="flex-1 btn-primary btn-round" @click="submit()">兑换</button>
				</view>
			</view>
			<x-alert type="danger" :closed="false" light>您当前拥有：金券*{{ info.recommend_gold_num }}，银券*{{ info.recommend_silver_num }}，最高可兑换{{ maxDay }}天</x-alert>
			<x-alert type="warning" :closed="false" light>推荐位排序为推荐到期时间倒序，如：01月10日 > 01月08日 > 01月05日</x-alert>
			<x-alert type="info" :closed="false" light>金券*1=1天，银券*5=1天</x-alert>
		</view>
		<x-loading v-if="loading" />
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { $page, $api, $message } from "@/utils";
const info = ref({
	recommend_silver_num: '--',
	recommend_gold_num: '--',
	recommendNum: '--'
});
const form = ref({
	num: 0
});
const loading = ref(false);
const maxDay = computed(() => {
	let n = info.value.recommend_gold_num;
	if (info.value.recommend_silver_num > 0) {
		n += Math.floor(info.value.recommend_silver_num / 5);
	}
	return Number(n);
})
const getInfo = () => {
	loading.value = true;
	$api.Technician.info().then(data => {
		info.value = data;
	}).finally(() => {
		loading.value = false;
	})
}
const submit = () => {
	if (form.value.num > maxDay) {
		$message.error('超过最大兑换天数');
		return;
	}
	loading.value = true;
	$api.Technician.recommendExchange(form.value).then(res => {
		$message.success(res.msg);
		getInfo();
		getRecommendTechnician();
	}).catch((err:any) => {
		$message.error(err.msg);
	}).finally(() => {
		loading.value = false;
	})
}
const RecommendTechnician = ref<TechnicianInterface[]>([]);
const getRecommendTechnician = () => {
	$api.Technician.list({
		limit: 8,
		recommend: 1
	}).then((data: any) => {
		RecommendTechnician.value = data;
	});
}
onLoad(() => {
	getInfo();
	getRecommendTechnician();
})
</script>
